<template>
  <div class="search">
    <div class="search-wapper">
      <div class="select-nav">
        <span class="navTitle">所有宝贝</span>
      </div>

      <div :class="['nav-content']">
        <div>
          <div>
            <div class="selector-keyword">
              <span>全部结果：</span>
              <span class="keyword">{{ '"' + keyword + '"' }}</span>
              <ul>
                <li v-for="(l, i) in searchList" :key="i">
                  <span>{{ l }}</span>
                  <span @click="onDelClick(l, i)"
                    ><el-icon><Close /></el-icon
                  ></span>
                </li>
              </ul>
            </div>

            <Button v-if="searchData.expandList?.length > 0" :class="['nav-show-btn', isShow ? 'arrow-up' : 'arrow-down']" :label="isShow ? '收起筛选' : '展开筛选'" @click="isShow = !isShow" />
          </div>

          <template v-if="isShow">
            <template v-for="(category, index) in searchData.expandList" :key="index">
              <div ref="selectorRef" :class="['selectorLine', { expand: category.isExpend }]">
                <span class="selector-name">{{ category.name }}</span>

                <ul class="selector-list">
                  <li v-for="(cate, idx) in category.values" :key="idx" @click="onCateClick(category, cate)">{{ cate.name }}({{cate.size}})</li>
                </ul>

                <Button v-if="category.showMore" :label="category.isExpend ? '收起' : '展开'" @click="onMoreClick(category)" />
              </div>
            </template>
          </template>
        </div>
      </div>

      <ul class="goods" v-if="searchData.list?.length > 0">
        <li v-for="goods in searchData.list" :key="goods.goodsId" @click="onGoodsClick(goods)">
          <img :src="goods.goodsImg?.split(',')[0]" />
          <div class="info">
            <div class="goods-price">
              <span class="price">￥{{ goods.goodsSalesPrice.toFixed(2) }}</span>
              <div class="shoppingcart" @click.stop="onCartClick(goods)">
                <img src="@/assets/images/gouwuche.svg" />
              </div>
            </div>
            <p class="goods-name">{{ goods.goodsName }}</p>
            <p class="goods-sub" v-if="goods.goodsSubtitle">{{ goods.goodsSubtitle }}</p>
            <p class="goods-brand">
              <div class="sitePng">
                <img src="@/assets/images/供应商标识.png" />
              </div>
              <span class="siteBrand">品牌 : {{ goods.brand }}</span>
            </p>
          </div>
        </li>
      </ul>

      <el-empty v-else description="暂无商品" />

      <Pager :page="searchData.search.page" :total="searchData.total" :limit="searchData.search.limit" @current-change="onCurrentChange" />
    </div>

    <Cart v-model:visible="cartVisible" ref="shoopingCartRef" :goodsId="searchData.currentGoodsId" />
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, watch, nextTick, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Close } from '@element-plus/icons-vue'
import api from '@/api'
import consts from '@/consts'
import Button from '@/components/button/button.vue'
import Pager from '@/components/pager/index.vue'
import Cart from '@/components/cart/index.vue'

const route = useRoute()
const router = useRouter()

const emit = defineEmits(['search'])

let keyword = route.query.keyword
let catId = []
catId.push(route.query.catId)

const Cid = route.query.cid

const cateKeyWord = ref('')

const cartVisible = ref(false)
const isShow = ref(true)
const selectorRef = ref('')

const searchList = ref([])

const searchData = reactive({
  total: 0,
  list: [],
  search: {
    page: 1,
    limit: consts.Limit
  },
  currentGoodsId: ''
})

const loadData = async () => {
  let url = '/medinstrument/site/search'
  let params = { keyword, pageNum: searchData.search.page, pageSize: searchData.search.limit, expandParam: searchList.value, cid: Cid }
  let { data, err } = await api.post(url, params)
  if (err) {
    ElMessage.error(err)
  } else {
    searchData.list = data.list
    searchData.list.forEach(item =>{
      item.goodsExpandparamValueList.forEach(goods=>{
        if (goods.expandparamName == '品牌'){
          item.brand = goods.expandparamValueName;
        }else{
          item.brand ? item.brand : '';
        }
      })
    })
    searchData.total = data.count
    searchData.expandList = data.expandList
    if (searchData.expandList?.length > 0 && isShow.value) {
      nextTick(() => {
        selectorRef.value.forEach((e, index) => {
          searchData.expandList[index].showMore = e.scrollHeight - e.offsetHeight > 10
        })
      })
    }
  }
}

const onCurrentChange = (val) => {
  searchData.search.page = val
  loadData()
}

const onGoodsClick = (goods) => {
  let { href } = router.resolve({
    path: `/goods/${goods.goodsId}`,
    query: {
      supplierName: goods.supplierName,
      supplierId: goods.supplierId
    }
  })
  window.open(href, '_blank')
}

const onCartClick = (goods) => {
  searchData.currentGoodsId = goods.goodsId
  cartVisible.value = true
}

const onMoreClick = (category) => {
  category.isExpend = !category.isExpend
}

const onCateClick = (category, cate) => {
  console.log("category",category);
  console.log("cate",cate)
  const param = category.name + ':' + cate.name
  if (!searchList.value.find((e) => e === param)) {
    searchList.value.push(param)
    loadData()
  }
}

const onDelClick = (item, i) => {
  searchList.value = searchList.value.splice(item, i)
  loadData()
}

const onExpandClick = () => {
  isShow.value = true
}

onMounted(() => {
  loadData()
})
</script>
<style scoped lang="scss">
.search {
  min-height: 530px;
  background: #f8f8f8;

  .search-wapper {
    width: 1080px;
    margin: 0 auto;
    position: relative;

    .select-nav {
      position: absolute;
      top: -42px;
      left: 0;

      .navTitle {
        display: block;
        width: 240px;
        height: 42px;
        line-height: 42px;
        font-size: 16px;
        font-weight: 500;
        color: #fff;
        background-color: #64c8b9;
        text-align: center;
        cursor: pointer;
      }
    }

    .nav-content {
      position: relative;
      width: 1080px;
      margin: 0 auto;
      background-color: #fff;
      padding: 20px;

      .selector-keyword {
        display: flex;

        .keyword {
          margin-right: 10px;
        }

        ul {
          display: flex;

          li {
            margin-right: 5px;
            padding: 0 5px;
            border-radius: 8px;
            border: 1px solid;
          }
        }
      }

      .selectorLine {
        display: flex;
        width: 100%;
        padding: 14px 0 4px 0;
        border-bottom: 1px solid #ebeef5;
        overflow: hidden;
        max-height: 35px;

        .selector-name {
          position: relative;
          min-width: 28px;
          padding: 10px 0;
          line-height: 16px;
          color: #909399;
          font-weight: 500;
        }

        .selector-name::after {
          content: '';
          width: 0;
          height: 0;
          position: absolute;
          right: -12px;
          top: 18px;
          border-top: 5px solid transparent;
          border-bottom: 5px solid transparent;
          border-left: 5px solid #919398;
          transform: translateY(-50%);
        }

        .selector-list {
          flex: 1;
          display: flex;
          flex-wrap: wrap;
          margin-left: 30px;

          li {
            height: 18px;
            line-height: 18px;
            padding: 10px 40px 10px 0;
          }
          li:hover {
            cursor: pointer;
          }
        }
      }

      .nav-show-btn {
        position: absolute;
        right: 20px;
        top: 10px;
        background-color: #ebeef5;
      }

      .expand {
        max-height: none;
        overflow: auto;
      }

      .nav-show-btn.arrow-up:after {
        content: '';
        width: 0;
        height: 0;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 5px solid #919398;
        transform: rotate(-90deg);
        margin-left: 10px;
      }

      .nav-show-btn.arrow-down::after {
        content: '';
        width: 0;
        height: 0;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 5px solid #919398;
        transform: rotate(90deg);
        margin-left: 10px;
      }
    }

    .goods {
      padding-top: 10px;
      width: 1120px;
      display: flex;
      flex-wrap:wrap;
      box-sizing: border-box;
      li {
        display: inline-block;
        width: 264px;
        height: 440px;
        background-color: #fff;
        box-sizing: border-box;
        cursor: pointer;
        margin: 0 8px 8px 0;
        box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);

        &:hover {
          border: 1px solid var(--color-primary);
        }

        &:nth-child(4n) {
          margin-right: 0;
        }

        img {
          width: 262px;
          height: 264px;
        }

        .info {
          display: flex;
          flex-direction: column;
          padding: 8px 10px;
          box-sizing: border-box;

          .goods-price {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .price {
              line-height: 25px;
              font-size: 18px;
              color: var(--color-primary);
              font-family: 'PingFangSC-Semibold';
              font-weight: 600;
            }

            .shoppingcart {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 34px;
              height: 34px;
              background-color: var(--color-primary);
              border-radius: 50%;

              img {
                width: 18px;
                height: 18px;
              }
            }
          }

          .goods-sub{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            line-height: 20px;
            color: var(--color-primary);
            margin: 6px 0 15px 0;
          }

          .goods-brand{
            display: flex;
            .sitePng{
              margin-right: 5px;
              img {
                width: 10px;
                height: 10px;
              }
            }

            .siteBrand{
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #606266;
              letter-spacing: 0;
              font-weight: 400;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }

          .goods-name {
            color: #303133;
            letter-spacing: 0;
            line-height: 22px;
            font-size: 16px;
            font-weight: 500;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            margin: 8px 0;
          }

        }
      };
    }
    .goods > :nth-child(2n){
      margin:0px 22px 0px 12px;
    }
    .goods > :nth-child(4n){
      margin:0px 0px 0px 12px;
    }
  }
}
</style>
